Leer más (Read More) para plantillas clásicas y del nuevo Blogger

Aprovechando que Christian tiene interés por el código de ´´Leer más`` este post va para él y todos los que desean saber como aplicarlo.
Es lógico que un post demasiado largo nos desespere y haga aburrida la visita al blog.
Para que un texto demasiado extenso salga más corto y muestre un enlace que diga´´Leer más ``o cualquier otra de frase de nuestra cosecha haremos lo siguiente:

Si nuestra plantilla es clásica añadiremos el siguiente código justo antes de </style>

Si utilizas el nuevo Blogger (ya no tan nuevo) debes añadirlo justo antes de: ]]></b:skin>

Este es el código:

.posthidden {display:none}
.postshown {display:inline}

Después incluimos antes de <head> lo siguiente:

<script type="text/Javascript">

function expandcollapse (postid) {

whichpost = document.getElementById(postid);

if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>

Guardamos y publicamos.
Luego justamente antes del texto que no se quiere mostrar, añadiremos :

Este es el cuerpo del post. Aquí quedará todo el texto que deseamos aparezca al hacer click sobre el link de ´´Leer más``. Es el texto que no se ve a primera vista.

Debes escribir el título del post en id="El título del post"

No olvidemos que al final del post debe cerrar con 

Por último... justo después de incluiremos el link que al hacer click sobre él mostrará la parte oculta del post, así:

<a href="javascript:expandcollapse('El título del post')">[+/-] Seguir Leyendo...</a>

(He dejado en color rojo el texto para copiar, en color verde el que debemos sustituir por el título de nuestro post y en azul es el texto que escribiremos y deseamos salga en el expandible)

Guardamos los cambios y publicamos.
No hay que olvidar poner en el código del link el mismo título del post.

Vía: Daleclick

ACTUALIZADO>

Si deseas añadir una imagen en lugar del texto puedes hacerlo sustituyendo [+/-] Seguir Leyendo... por... <img src="url-de-la-imagen">

Quedaría algo así:

TEXTO INICIAL
TEXTO OCULTO-TEXTO OCULTO-TEXTO OCULTO-TEXTO OCULTO-TEXTO OCULTO-TEXTO OCULTO-<a href="javascript:expandcollapse('título- de-la-entrada')">
<img src="url-de-la-iamegn"></a>

Hay una forma de no tener que aplicar este código cada vez que escribimos una entrada, es más cómodo y ahorra tiempo, basta con añadir el código para las entradas en la plantilla de entrada, la encontraréis en este orden:

Opciones/Formato/Plantilla de entrada
Eso hace que quede ´´grabado`` el código y salga en todas las entradas, pero con la posibilidad de escoger a que entradas le añadimos ´´el leer más`` o la imagen.

De no desear aplicarlo lo eliminamos y listo.

Christian H. Franulic C.: Gem@, muchisimas gracias por responder a mi solictud, pero no he podido dar solucion a mi problema, en mi plantilla no existe HEAD probe en la seccion header pero no resulto, seguire intentando y te aviso,

Si se te ocurre alguna otra,
alternativa, avisame, por favor,

Gracias nuevamente,

saludos,

Christian; 15.10.06
Gem@: Saludos Cristian:
Yo si veo que tengas HEAD en tu plantilla, está al pricncipio 0); 17.10.06
Anónimo: me ha sido imposible colocar el leer más o el continuará o lo que seaaaa... auuuxiiiliiooo; 17.2.07
Gem@: Si no me das más datos no sé como ayudarte anónimo.; 17.2.07
Ondina: Hola Gem@. Otra vez precisando tu ayuda!!
Las entradas me quedan muy largas y quise probar con el "sigue leyendo" pero, ni modo... Seguí a pie juntillas todo lo que indicas, pero nada. Así que lo borré y decidí pedirte ayuda, no sé qué puedo estar haciendo mal. Localizo el style; el head no lo localizaba pero leí en uno de los comentarios que indicabas que estaba al inicio, pero lo que yo veo al inicio no es /head sino head. Bueno, qué lío, no sé si será por éso. Luego, el texto lo copié y pegué tal cual y en mi entrada hice lo oportuno, pero, mira tú por dónde, sí me sale al final lo del sigue leyendo, pero se ve toda la entrada entera!!.
Gracias, como siempre.
:-); 13.3.07
Gem@: Hola Ondina, he intentado ver tu plantilla pero no tenía acceso a tu blog desde el comentario que has dejado, al parecer no tienes activado el perfil.
Si no recuerdo mal usabas la plantilla Minima Blak y estoy segura que tienes <head> en alguna parte.
Lo del problema que comentas no quiere decir que lo hicieras mal, debe ser algún error, mira si has puesto el mismo título que el del post y no olvides cerrar con ; 15.3.07
Ondina: Gem@, ya actualicé el perfil para que se acceda al blog desde él.
Volveré a revisar la plantilla de todos modos.

Gracias y un saludo!
:-); 18.3.07
Gem@: Gracias Ondina ;); 20.3.07
Anónimo: Tenía este post guardado para leer más adelante, sabía que lo necesitaría. Gracias.; 24.5.07
Gem@: Espero que te resulte bien si no es así házmelo saber ;); 29.5.07
Anónimo: Hola Gem@, no te niego que tu página me ha ayudado un montonnnnnnnnnn gracias por eso, pregunto? quiero darle un aspecto de pagina web al blog y para eso este articulo me puede ayudar, pero no comprendo bien el asunto, si puedes escribirme y darme tu opinión, mi blog es http://www.arte-leny.blogspot.com, para que envalues si el tipo de plantilla me puede ayudar, ademas para que veas los cambios que gracias a ti, he logrado pero me falta mucho, por que quiero darle un aspecto informativo al blog para ayudar a los artistas, incluyendote a ti...cariños leny vila_12@hotmail.com; 14.6.07
Gem@: Hola Leny no me dices que es lo que no entiendes :(
El aspecto de página Web es según la idea que tengas, hay muchas plantillas en la red para Blogger beta, la tuya es una de las más sencillas de modificar así que ¡¡adelante¡¡
(Gracias por lo de artista ); 15.6.07
::::VARGAS::::: Hombre, gracias por el truco, ya lo puse en

manteco.blogspot.com

En serio, fue el mejor explicado y más útil.
Mucha suerte; 5.2.08
Gem@: Gracias WEBARGAS ;); 5.2.08
Anónimo: Hola Gema a mi no me sale el truco, mi blog es de blogger antiguo y la plantilla minimal black, pero yo lo que quiero hacer es ocultar la respuesta a una adivinanza que he hecho, no todo el post, y me sale encima del mensaje "descubrir solución" y encima sin ocultar. Échale un vistazo y dime que es lo que hago mal.
un saludo, chao.

la dirección de mi blog es:

http://oasis-patronus.blogspot.com/; 25.3.08
Gem@: Hiro-Valiandfly si lo que deseas es ocultar un espacio determinado y no exactamente este código de expandir la entrada prueba a añadir este otro.
(Al final del todo está la explicación a tu pregunta)

Sobre el error que dices recuerda que debes escribir el título del post en id="El título del post".
No olvidar que al final del post debe cerrar con ; 26.3.08
Mónica Rojas: Hola gem@ gracias por el post!
por fin encontre un codigo que me sirviera.

salu2!; 4.5.08
Gem@: Me alegra mucho .:Monniz:. ;); 5.5.08
José Romero: Gema increible!!! El unico Read More que me ha funcionado!!!

Mil Gracias!!!

Un besazo!; 5.6.08
Gem@: Me alegra mucho Nanete, es un poco laborioso tener que añadir el título pero yo creo que vale la pena sobre todo para las plantillas adaptadas que se hace complicado localizar los mismos códigos que en las de Blogger originales ;); 5.6.08
psi-investigación: Muy bueno el truco!! He insertado el código en la plantilla. Todo va bien, lo único... que aparece en todos las entradas... ¿cómo hago para que aparezcatan sólo en las que yo quiero? tendria que quitarlo de la plantilla y poner el script (o lo que sea) en cada entrada?

gracias; 15.6.08
Unknown: me resulta todo!
menos la parte que se escribe en el post..
no me esconde nada =(...
sabes que puede ser?; 8.7.08
Gem@: Hola Cheer mira si añadiste el título del post en el código para el texto que permanece oculto:
aqui se añade el texto que permanecerá oculto 

El código anterior debe cerrar siempre con luego para crear el enlace que nos permite desplegar la entrada también hay que añadir el título de la entrada.
(Al final de esta entrada hay una actualización que aclara bastante como hacerlo, puedes copiar y pegar en tu editor de entradas y verás como funciona); 8.7.08
Unknown: si si lo hice tal cual, pero no te preocupes..
lo resolví con otro código

gracias de todas maneras =D; 8.7.08
Hipocrates: Hola a Gem@ y Administradores Felicitarles por el exelente Blog.

tengo la siguiente pregunta:

¿como puedo hacer que permanesca la imagen de mostrar oculto en la parte superior, ya que cuando le doy click la imagen aparece en la parte inferior?

algo asi como el Blog de Cesar : http://webjcp.blogspot.com/2007/03/una-bella-entrada-con-pullquote.html

Gracias y saludos; 31.8.08
Gem@: Hola Wiliam aunque un poco tarde te contesto por si aún no lo solucionaste.
Lo que César tiene añadido no es lo que conocemos por read more o leer más (que es lo mismo que expandir las entradas)
Él tiene un script que se aplica en el lugar donde vamos a darle uso.
Se crea un botón tipo texto o imagen y se desliza el contenido quedando el botón a la vista y siendo necesario hacer click para recoger.
Puedes crearlo siguiendo estos pasos.
Suerte ;); 5.9.08
Claudio Medina Briones: Hola Gema
Aplique tu solución para "Leer más" y me resulta perfecto con IE 7, pero en Firefox no se despliega el texto oculto al hacer clic, sobre "[+/-] Seguir leyendo". ¿Me faltará agregar algo, o esta solución no es compatible con Firefox?.
Bueno, muchas gracias por la ayuda que das publicando esta información.; 13.11.08
Gem@: Yo uso Firefox y funciona perfecto Karamba, de todos formas lo repasé por si algo no estaba bien y el resultado es bueno.
¿Puedes ver esta prueba con Firefox?; 13.11.08
Claudio Medina Briones: Estimada Gema, tu código está perfecto, el imperfecto soy yo, me acabo de dar cuenta que en el link ("seguir leyendo, cuando indique el título del post, me equivoque en el primer carácter, lo había puesto en minúscula y debía estar en mayúscula. Un pequeño y a la vez gran detalle. Me confundí con tantas pruebas que hice (a todas las titulaba "Prueba"), bueno solo me queda agradecerte y seguiré visitando tu blog, haber si aprendo algo que pueda compartir en éste espacio.

Slds. ;D; 14.11.08
Gem@: Me alegra que lo solucionaras Karamba ;); 15.11.08
Anónimo: Hola Gema!
he usado el cuarto y me sale sisisi, genial y facilísimo, pero tengo una duda.
El "[+/-] Seguir Leyendo..." lo iba a cambiar por "leer más" pero claro, cuando lo pinchas, lees todo el texto y cuando llegas abajo del texto claro! sigue quedando la misma frase "leer más". Hay alguna posiblidad de que cuando se haya abierto ponga "cerrar?"

y otra cosa, si le damos al cerrar, podemos hacer que vuelva a la posición desde la que dimos por primera vez al "leer más"?? es que se me descoloca, al cerrar o pinchar sobre el "leer más" de abajo me encuentro con que estoy en post bastante anteriores.

Gracias. Tienes un blog fantástico.
Menar; 15.11.08
Gem@: Menar el tema es que sólo hay un espacio para expandir y contraer la entrada, y ese espacio es el del texto, lo ideal sería añadir un texto que fuera útil par alas dos opciones por eso añadí [+/-] porque lo mismo vale para expandir como contraer.
Una opción es eliminar el texto y dejar sólo [+/-] y otra añadir un texto por ejemplo:
[+/-] Expandir-Recoger.
Otra idea es añadir dos imágenes una flecha hacia arriba y otra abajo con eso se soluciona todo.

El segundo tema que me dices, no es que haya forma es que así es como debe funcionar y funciona, lo que ves debe ser un error a la hora de añadir el código.
No he podido verlo en tu blog y no puedo decirte donde está el error :(; 15.11.08
Anónimo: Gracias Gema. Me ha quedado muy claro.
No te preocupes, está aún en construcción y estoy haciendo de todo antes de publicarlo, cuando lo "abra" espero poder preguntarte algo que pueda mostrarte.
MUCHAS GRACIAS!; 15.11.08
Gem@: Cuando tu quieres Menar ;); 15.11.08
Anabel Cornago: Hola,
soy un poco brutan con esto... Cuando dices:

"Luego justamente antes del texto que no se quiere mostrar, añadiremos : ...",

¿quieres decir en el editor donde hemos escrito la entrada?

Muchísimas gracias y estoy leyendo con atención la ifnromación del blog, que es fantástico.

Saludos desde Hamburgo.; 12.1.09
Gem@: yz Así es Anabel esa parte se añade en el editor donde escribimos la entrada.
Es decir añadimos en la plantilla y primer paso y luego en cada entrada añadimos esto:

Aquí el texto que mostramos en la entrada y permanece a la vista.
aquí el texto que quedará oculto<a href="javascript:expandcollapse('título- de-la-entrada')">
<img src=">url-de-la-imagen>"></a>

Al final explico como hacerlo para que este código aparezca en todas las entradas automáticamente y no tener que copiar y pegar cada vez.
Mira también esta entrada si lo que buscas es un sistema de expandir y recoger texto es mucho más sencilla y con el mismo efecto.

Expandir recoger; 13.1.09
Peliculas y TV: Gema me gustaria saber bn como se hace es que no te he podido entender esta parte:

"Luego justamente antes del texto que no se quiere mostrar, añadiremos¨

Y tambn queria saber como hiciste para colocar este formato de comentarios?

Espero tu respuesta.; 14.1.09
Peliculas y TV: Gema ya entendi lo primero pero me gustaria que me digeras como ago para cambiar el formato de comentarios, asi como tu lo tienes; 14.1.09
Gem@: Hola Tu TV siento no ver este comentario antes :(
Para añadir ese formulario mira aquí:
Añadir formulario

Y si quieres personalizarlo aquí:
Personalizar formulario

Suerte !!; 16.1.09
Anabel Cornago: Hola,
lo probé pero me salió mal. Se veían los primeros párrafos del texto, se ocultaban los siguientes y aparecía el último párrafo con "leer más". Algo hice mal, llo volveré a intentar y te cuento.
Muchas gracias.; 22.1.09
Gem@: Anabel eso ocurre cuando se "cuela" una etiqueta dentro del texto oculto.
Intenta que esa etiqueta quede al final porque es lo que hace que se oculte el texto ;)
(A veces los saltos de línea crean esa etiqueta, Blogger es así de complicado...); 23.1.09
j_castro: Hola Gema

Gracias por el post,de los cienesycienes que hay sobre el tema "leer mas" en los que llevo perdido tres o cuatro horas, es el único que está escrito de forma inteligible, y hasta elegante. El problema es que sigo las instrucciones al pie de la letra y no me funciona, y ya no sé que es lo que pasa. Te agradeceria que echaras un vistazo a http://fotolios.blogspot.com/2009/01/retratos-del-poder.html y si es posible me lo dijeras..; 24.1.09
Gem@: Creo que es un error sin importancia a la hora de añadir el código.
Verás.. en la entrada debemos incluir esto:

Aquí escribimos el texto, al principio de la entrada...bla,bla,bla texto y más texto.

Este espacio es para añadir el texto que permanecerá oculto 
<a href="javascript:expandcollapse('El título del post')">[+/-] Seguir Leyendo...</a>

Es muy importante no olvidar la etiqueta  de lo contario no se oculta el texto y todo permanece a la vista.
Espero que lo soluciones cualquier cosa me dices algo :); 29.1.09
Joaquín: Que quieres decir eso de el texto que no se quiere mostrar, no entiendo :-|; 4.3.09
Gem@: Se trata de ocultar una parte de texto y que al hacer click en un enlace se muestre, ese es "el texto que no se quiere mostrar" el que permanece oculto.; 4.3.09
Rodrigo & Chelo: hola gema funciona de maravilla jaja pero weno tengo una pregunta se puede hacer esto pero al momento de pincharle al seguir leyendo qe se vaya al link de la entrada? no solo qe se abra en la principal? jaja weno gracias tu blog eçme es de gran ayuda y creo qe para muchos qe somos novatos en esto de veras felicidades por el gran trabajo; 13.5.09
Gem@: yz Modificar la forma de mostrase no he podido hacerlo Rodrigo, hay otras formas o sistemas algunas puedes verlas en el siguiente enlace
http://gemablog-.blogspot.com/search/label/leer%20m%C3%A1s ;); 13.5.09
docencia: Hola Gema, te felicito por tu labor, es fantástica!! Yo llevo poco tiempo en el mundo de los blog y el tuyo es para mí como la biblia!! :D

Quería hacerte una pregunta, en el post se explica muy bien como ocultar texto e imagenes, pero no habla de otro tipo de ficheros (videos del youtube, ppt, etc) ¿sabes cómo puedo hacer para poder ocultarlos también?.. Si se puede claro.

Gracias anticipadas!; 26.5.09
Gem@: yz Saludos Formador Ocupacional, sería de la misma forma que ocultamos texto, en la entrada para que situemos el lugar donde escribimos el texto añadí:
TEXTO OCULTO-TEXTO OCULTO-TEXTO OCULTO-TEXTO OCULTO-TEXTO OCULTO-TEXTO OCULTO
El contenido a ocultar se añade en ese espacio independientemente del contenido que sea, imágenes, código, vídeo, reproductores... ;)
(Me encanta el trabajo que desempeñas "formador ocupacional"); 26.5.09
docencia: Hola Gema, te felicito por tu labor, es fantástica!! Yo llevo poco tiempo en el mundo de los blog y el tuyo es para mí como la biblia!!

Quería hacerte una pregunta, en el post se explica muy bien como ocultar texto e imagenes, pero no habla de otro tipo de ficheros (videos del youtube, ppt, etc) ¿sabes cómo puedo hacer para poder ocultarlos también?.. Si se puede claro.

Gracias anticipadas!; 26.5.09
Anónimo: como hacer para que al pasar el mouse realize lo que hace cuando te paras sobre la imagen te a friend; 5.7.09
Gem@: yz Formador Ocupacional pensaba que había respondido a tu pregunta en ese momento :O
Podemos ocultar cualquier contenido simplemente incluyendo el código en el mismo sitio que incluimos el texto.
¿Cómo va el problema del blog con Explorer?

yz Anónimo no entiendo bien tu pregunta y por favor deja la url de tu blog ;); 7.7.09
Natalia Trujillo: Hola Gem@

primero que nada,decirte que me encanta tu blog! una amiga me ayudó y bueno, aquí ando.

Con este tuve problemas. Intenté este y el de con imagen y ninguno me funcionó. Fui paso a paso pero tengo lo mismo que dices acá.

Con el de la imagen me salió un cuadro blanco, pero no mi imagen.

Y con este, me sale todo el texto, nada oculto. Y tenía una duda con eso del nombre del post. ¿Te refieres solo al titulo de la entrada, o al URL de la entrada?

Gracias por todo!

besos!

Nataly; 29.7.09
Gem@: yz Me refiero "El título del post" debemos añadir en ese espacio el título igual a como lo añadimos en el post ;); 29.7.09
Anónimo: hola gem@! ya he resuelto el problema del fondo. ahora quería preguntarte cómo haces para que debajo de cada entrada aparezcan los títulos de entradas relacionadas...; 25.9.09
Anónimo: añado: en este caso te salen a ti:

* Leer más (Read More) para plantillas clásicas y del nuevo Blogger
* Layout for All - Lindas plantillas
* Chuleta o Cheat Sheet de Blogger
* Método sencillo de Expandir | Recoger
* Crear un Sitemap-mejorar el rendimiento
Gracias!; 25.9.09
Gem@: yz lk eso no lo tengo explicado, me guié por una entrada de http://vagabundia.blogspot.com/ no la localizo ahora pero quizás tú tengas más suerte ;); 25.9.09
Unknown: Piedra Preciosa estoy intentando entenderlo, en cada entrada debo aplicar el código, es decir en las anteriores también? :D; 29.1.10
Unknown: No puedo hacerme entender, si hago una nueva entrada coloco el código, debo editar las antigüas?; 29.1.10
Gem@: :: Graciela las antiguas o mejor dicho las anteriores a añadir el leer más no necesitan añadir nada, pero tampoco mostrará nada.
Esto no es como los post resumidos que modificas la plantilla y se añade automáticamente el resumen en todos los post.
Personalmente no te recomiendo este sistema, hay otras formas sencillas de expandir y contraer contenido pero todo depende la función que deseas darle :); 31.1.10
Unknown: Bien mi vida, conduce a Mis Grace al destino :P
Resumir un poquito las entradas, me ha dicho Jmiur que leer más está en Blogger in Draft, pero prefiero no utilizarlo porque durante muchos días no pude ingresar por ahí...algo que se pueda aplicar en la plantilla sin utilizar ese servicio.

Espero haberme hecho enteder ;); 31.1.10
Gem@: :: Pues te pensaba mandar precisamente esa opción Graciela es la más práctica pero si le ves problema %% esta
otra idea de J.Miur es muy simple y efectiva :); 31.1.10
Mail: Hola!consulta! tengo un problema muyyyy grandee con esta opcion! si la sabes resolver te recibis de genio maestro! Cuando pongo leer mas no me muestra el video de Youtube en el cuerpo de la entrada, pero si cuando entras en la entrada, que hago??; 18.3.10
Gem@: :: Mail no puedo ver donde tienes ese ejemplo que no oculta el vídeo, de todas formas en Blogger ya se dispone de esa opción si tener que añadir nada mira %% esta entrada :); 19.3.10
RinoPC: Hola Gema, sabes eres genial no se como te das tiempo para investigar y darnos estas ayudas y aportes tan buenos.
Prove esto que nos dices y si me funciono, pero me gustaria lo que quisiera hacer es que en la página principal de mi blog salgo un resumen de cada post acompañados de una imagen a la drecha... Algo asi como lo tienes tu actualmente. Crees que podrias decirme como hacerlo.
Saludos y buena suerte.; 23.6.10
Gem@: :: Hola RinoPC, agradezco tu comentario y sobre tu pregunta decirte que hay una opción muy sencilla de conseguir estos resumenes con imagen sólo que se muestra en todas las entradas, las explicaciones puedes verlas aquí:
http://gemablog-.blogspot.com/2009/03/resumen-en-todos-los-post.html
Yo lo tengo de otro modo algo más laborioso y las explicaciones las puedes ver en Vagabundia:
http://vagabundia.blogspot.com/2009/10/resumen-posts-2-extractos-del-texto.html
Revisa bien son dos o tres entradas con las explicaciones :); 23.6.10
Anónimo: :) :'( :( :P :D :$ ;) :-I :X :O |O :S gracias por todo men; 31.12.10
Datisha: hola!! he seguido todos los pasos pero no me sale t_t de alguna forma u otra en unos de mis post anteriores si me salio pero cuando lo quiero volver hacer no puedo, he intentado con muchos codigos diferente que quizas no haya borrado bien los codigo anteriores y cuando quiero volverlo hacer guiandome con los antiguos post me salen mas codigos de lo necesario, impidiemoe decifrar lo que deseo u_u, mi plantilla es clasica, pero he puesto tantos codigos intendo que me salga y al final no salia, que quizas eso sea el problema? y queria hacer otra pregunta... mis comentarios se van hacia otra ventana donde solo se ve los comentarios pero no el post publicado, me que gustaria que aparescan ambos, y pos tambien intente con codigos que al final no me salieron t_t y esto se hizo largo XD y pos gracias por dar tu tiempo para ayudar ^^; 26.3.11
Gem@: :: Datisha esta opción para leer más es de hace mucho tiempo, hace cosa de un año en Blogger tenemos la opción de expandir el post en unos sencillos pasos. Puedes verlo aquí:
http://gemablog-.blogspot.com/2010/02/personalizar-la-etiqueta-more.html

Para escoger la forma de mostrar los comentarios puedes ir a Configuración/Comentarios y escoger entre:
-Página completa
-Ventana emergente
-Entrada incrustada a continuación; 26.3.11
Plácido Palmero Sierra: He seguido las instrucciones y todo me ha salido perfecto. Era un efecto que hacía tiempo estaba buscando y que, cómo no, ha tenido que ser contigo cuando me ha funcionado. Gracias. Un día deberían de hacerte un monumento. Saludos cordiales.; 29.9.12